<template>
    <div class="app-aside app-main-aside hidden-xs bg-black">
        <div class="aside-wrap">
            <div class="navi-wrap">
                <!-- user -->
                <div class="clearfix hidden-xs text-center hide" id="aside-user">
                    <div class="dropdown wrapper" dropdown>
                        <a ui-sref="app.page.profile">
                          <span class="thumb-lg w-auto-folded avatar m-t-sm">
                            <img :src="imgSrc" class="img-full" alt="...">
                          </span>
                        </a>
                        <a href class="dropdown-toggle hidden-folded" dropdown-toggle>
                              <span class="clear">
                                <span class="block m-t-sm">
                                  <strong class="font-bold text-lt">John.Smith</strong>
                                  <b class="caret"></b>
                                </span>
                                <span class="text-muted text-xs block">Art Director</span>
                              </span>
                        </a>
                        <!-- dropdown -->
                        <ul class="dropdown-menu animated fadeInRight w hidden-folded">
                            <li class="wrapper b-b m-b-sm bg-info m-t-n-xs">
                                <span class="arrow top hidden-folded arrow-info"></span>
                                <div>
                                    <p>300mb of 500mb used</p>
                                </div>
                                <!--<progressbar value="60" type="white" class="progress-xs m-b-none dker"></progressbar>-->
                            </li>
                            <li>
                                <a href>Settings</a>
                            </li>
                            <li>
                                <a ui-sref="app.page.profile">Profile</a>
                            </li>
                            <li>
                                <a href>
                                    <span class="badge bg-danger pull-right">3</span>
                                    Notifications
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a ui-sref="access.signin">Logout</a>
                            </li>
                        </ul>
                        <!-- / dropdown -->
                    </div>
                    <div class="line dk hidden-folded"></div>
                </div>
                <!-- / user -->

                <!-- nav -->
                <nav ui-nav class="navi">
                    <!-- list -->
                    <ul class="nav">
                        <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
                            <span translate="aside.nav.HEADER">数据库</span>
                        </li>
                        <li v-link="{ path: '/paas/mysql', activeClass: 'active' }">
                            <a>
                                <i class="glyphicon glyphicon-calendar icon text-info-dker"></i>
                                <span class="font-bold">Mysql</span>
                            </a>
                        </li>

                        <li v-link="{ name: 'redis', activeClass: 'active' }">
                            <a>
                                <i class="glyphicon glyphicon-stats icon text-primary-dker"></i>
                                <span class="font-bold">Redis</span>
                            </a>
                        </li>

                        <li ui-sref-active="active">
                            <a ui-sref="paas.mongodb">
                                <i class="glyphicon glyphicon-briefcase icon"></i>
                                <span class="font-bold">Mongodb</span>
                            </a>
                        </li>



                        <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
                            <span translate="aside.nav.THEADER">服务器</span>
                        </li>

                        <li ui-sref-active="active">
                            <a ui-sref="paas.zookeeper.basicInfo">
                                <i class="glyphicon glyphicon-signal"></i>
                                <span class="font-bold">Zookeeper</span>
                            </a>
                        </li>

                        <li v-link="{ name: 'books', activeClass: 'active' }">
                            <a>
                                <i class="glyphicon glyphicon-book"></i>
                                <span class="font-bold">图书管理</span>
                            </a>
                        </li>

                        <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
                            <span>大规模计算</span>
                        </li>

                        <li ui-sref-active="active">
                            <a ui-sref="paas.computer">
                                <i class="glyphicon glyphicon-signal"></i>
                                <span class="font-bold">大数据计算服务</span>
                            </a>
                        </li>


                        <li class="line dk"></li>

                        <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
                            <span translate="aside.nav.YHEADER">基本</span>
                        </li>

                        <li v-bind:class="{'active':showSub2}">
                            <a href="javascrpt:void(0)" class="auto" @click="showSub2=!showSub2">
                                  <span class="pull-right text-muted">
                                    <i class="fa fa-fw fa-angle-right text"></i>
                                    <i class="fa fa-fw fa-angle-down text-active"></i>
                                  </span>
                                <i class="glyphicon glyphicon-briefcase icon"></i>
                                <span class="font-bold">UI Kits</span>
                            </a>
                            <ul class="nav nav-sub dk">
                                <li class="nav-sub-header">
                                    <a href>
                                        <span>UI Kits</span>
                                    </a>
                                </li>
                                <li v-link="{ name: 'jstree', activeClass: 'active' }">
                                    <a>
                                        <span>jstree</span>
                                    </a>
                                </li>
                                <li v-link="{ name: 'fileUpload', activeClass: 'active' }">
                                    <a>
                                        <span>File Upload</span>
                                    </a>
                                </li>
                                <li v-link="{ name: 'uiSortable', activeClass: 'active' }">
                                    <a>
                                        <span>vue-sortable</span>
                                    </a>
                                </li>
                            </ul>
                        </li>

                        <li v-bind:class="{'active':showSub}">
                            <a href="javascrpt:void(0)" class="auto" @click="showSub=!showSub">
                                  <span class="pull-right text-muted">
                                    <i class="fa fa-fw fa-angle-right text"></i>
                                    <i class="fa fa-fw fa-angle-down text-active"></i>
                                  </span>
                                 <i class="fa fa-github-alt"></i>
                                 <span class="font-bold">项目管理</span>
                            </a>
                            <ul class="nav nav-sub dk">
                                <li class="nav-sub-header">
                                    <a href>
                                        <span>项目管理</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.dashboard-v1">
                                        <span>项目列表</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.dashboard-v1">
                                        <span>新建项目</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.dashboard-v1">
                                        <b class="label bg-info pull-right">N</b>
                                        <span>编辑项目</span>
                                    </a>
                                </li>
                            </ul>
                        </li>

                        <li v-bind:class="{'active':showSub1}">
                            <a href="javascrpt:void(0)" class="auto" @click="showSub1=!showSub1">
                              <span class="pull-right text-muted">
                                <i class="fa fa-fw fa-angle-right text"></i>
                                <i class="fa fa-fw fa-angle-down text-active"></i>
                              </span>
                                <i class="glyphicon glyphicon-file icon"></i>
                                <span class="font-bold">节点管理</span>
                            </a>
                            <ul class="nav nav-sub dk">
                                <li class="nav-sub-header">
                                    <a href>
                                        <span>节点管理</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.dashboard-v1">
                                        <span>节点列表</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.dashboard-v1">
                                        <span>新建节点</span>
                                    </a>
                                </li>
                                <li ui-sref-active="active">
                                    <a ui-sref="app.dashboard-v1">
                                        <b class="label bg-info pull-right">N</b>
                                        <span>编辑节点</span>
                                    </a>
                                </li>
                            </ul>
                        </li>

                        <li class="line dk"></li>

                        <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
                            <span>你的资料</span>
                        </li>
                        <li>
                            <a ui-sref="paas.profile">
                                <i class="icon-user icon text-success-lter"></i>
                                <b class="badge bg-success pull-right">30%</b>
                                <span>个人资料</span>
                            </a>
                        </li>
                        <li>
                            <a ui-sref="paas.docs">
                                <i class="icon-question icon"></i>
                                <span>文档说明</span>
                            </a>
                        </li>
                    </ul>
                    <!-- / list -->
                </nav>
                <!-- nav -->

                <!-- aside footer -->
                <div class="wrapper m-t">

                    <div class="text-center-folded">
                        <span class="pull-right pull-none-folded">60%</span>
                        <span class="hidden-folded">Milestone</span>
                    </div>
                    <div class="progress progress-xxs m-t-sm dk">
                        <progressbar now="60" type="info"></progressbar>
                    </div>

                    <div class="text-center-folded">
                        <span class="pull-right pull-none-folded">35%</span>
                        <span class="hidden-folded">Release</span>
                    </div>
                    <div class="progress progress-xxs m-t-sm dk">
                        <progressbar now="35" type="success"></progressbar>
                    </div>

                </div>
                <!-- / aside footer -->
            </div>
        </div>
    </div>
</template>
<style lang="sass">

</style>
<script>

    import {progressbar} from 'vue-strap'

    export default{
        data(){
            return{
                imgSrc:"../resources/img/a0.jpg",
                showSub:false,
                showSub1:false,
                showSub2:false
            }
        },
        methods :{
            consoleLog (obj){
                console.log(obj)
            }
        },
        components:{
            progressbar
        }
    }

</script>
